<!--
 * @Author: cest
 * @Date: 2022-08-09 08:56:15
 * @LastEditTime: 2022-08-09 11:03:41
 * @LastEditors: cest
 * @FilePath: /nuxt3-vite/pages/nuxt-color-mode/index.vue
 * @Description: 编辑描述内容
-->
<script setup lang="ts">
const colorMode = useColorMode()
// console.log('colorMode', colorMode)
// useHead({
//   title: '666',
//   titleTemplate: (titleChunk) => {
//     console.log('titleChunk', titleChunk)
//     return ''
//   },
// })
useHead({
  titleTemplate: 'Nuxt Color Mode - %s',
})
</script>

<template lang="pug">
.container
  h1 Color mode: {{ colorMode.value }}
  select(v-model="colorMode.preference" :title="colorMode.value")
    option(value="system")
      | System
    option(value="light")
      | Light
    option(value="dark")
      | Dark
    option(value="sepia")
      | Sepia
</template>

<style scoped>
select {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}

.dark select {
  background-color: #091a28;
  color: #ebf4f1;
}

.sepia select {
  background-color: #f1e7d0;
  color: #433422;
}
</style>
